<template>
	<view class="page-fill">
		<view class="bookswrap">
			<view class="opbook">
				<view class="lefttext">我的书架</view>
				<view class="righttext" @tap="clearall">一键清空</view>
			</view>
			<view class="mybookwrap">
				<view class="mybookitem" v-for="(item,index) in booklist" :key="index" @tap="gotobookdetail(item)">
					<!-- <image :src="item.bookImg" class="bookimg"></image> -->
					<himg class="bookimg" :src="item.bookImg" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
					<view class="booktitle">{{item.title}}</view>
					<view class="remove" @tap="removebook(item.id)"><fa-icon type="trash-o" size="22" color="red"></fa-icon> </view>
				</view>
				 
				 
			</view>
		</view>
		<nodata v-show="hasvalue"></nodata>
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components:{
			nodata
		},
		data() {
			return {
				booklist:[],
				hasvalue:false
			}
		},
		onLoad() {
			var mysjbook =  uni.getStorageSync("mybooklist");
			//console.log(mysjbook);
			if(mysjbook == null || mysjbook =="" || mysjbook == undefined){
				this.boolist = [];
			}else{
				this.booklist = mysjbook;
			}
			if(this.booklist.length==0){
				this.hasvalue = true;
			}
		},
		methods: {
			removebook(fid){
				var me = this;
				var mysjbook = me.booklist;
				for(let i = 0;i<mysjbook.length;i++){
					let cid = mysjbook[i].id;
					if(fid == cid){
						mysjbook.splice(i,1);
						break;
					}
				}
				
				uni.setStorageSync("mybooklist",mysjbook); 
			},
			gotobookdetail(f){
				uni.navigateTo({
					url:'../bookdetail/bookdetail?fictionid='+f.id+'&title='+f.title
				})
			},
			clearall(){
				this.bookList = [];
				uni.removeStorageSync("mybooklist");
				uni.removeStorageSync("cachebookchapter");
			}
		}
	}
</script>

<style>
@import url("bookshelf.css");
</style>
